<template>
  <div id="container"></div>
  <div style="position: absolute;top: 10px;right: 20px;">
    <input v-model="time.hour" type="number">
    <input v-model="time.minute" type="number">
    <input v-model="time.second" type="number">
  </div>
  
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, reactive, watch } from 'vue'

import { BridgeScene } from '../scene/BridgeScene'
import { SceneTime } from '../scene/SceneTime'
import { createWS } from '../api/websocket'

// 当前时间
const now = new Date();

// 场景的时间，默认是开始时间，可以手动修改时间
const time = reactive({
  hour: now.getHours(),
  minute: now.getMinutes(),
  second: now.getSeconds()
})

createWS()

let bridgeScene:BridgeScene|null = null;

onMounted(() => {
  // 场景的容器
  const container = document.getElementById('container') as HTMLElement;
  bridgeScene = new BridgeScene(container, new SceneTime(time.hour, time.minute, time.second));
  bridgeScene.init();
})

watch(time, function(newVal) {
  bridgeScene?.updateSceneTime(newVal.hour, newVal.minute, newVal.second);
})

onUnmounted(() => {
  if (bridgeScene) {
    bridgeScene.clear();
  }
});

</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>